time:
This is where time events are reported
revision:
time:
This is where time events are reported
<div class="grid">
<div>
<p> time: <span id="clock"></span></p>
<blockquote id="timeEvent">This is where time events are reported</blockquote>
</div>
<img id="image" src="../images/17.jpg" alt="nio" width="80%">
<div class="time">
<h3>Set wake-up time</h3>
<select id="wakeUpTimeSelector">
<option value="1">1 AM - 2AM</option>
<option value="2">2 AM - 3AM</option>
<option value="3">3 AM - 4AM</option>
<option value="4">4 AM - 5AM</option>
<option value="5">5 AM - 6AM</option>
<option value="6">6 AM - 7AM</option>
<option value="7">7 AM - 8AM</option>
<option value="8" selected>8 AM - 9AM</option>
<option value="9">9 AM - 10AM</option>
<option value="10">10 AM - 11AM</option>
<option value="11">11 AM - 12PM</option>
<option value="12">12 PM - 1PM</option>
<option value="13">1 PM - 2PM</option>
<option value="14">2 PM - 3PM</option>
<option value="15">3 PM - 4PM</option>
<option value="16">4 PM - 5PM</option>
<option value="17">5 PM - 6PM</option>
<option value="18">6 PM - 7PM</option>
<option value="19">7 PM - 8PM</option>
<option value="20">8 PM - 9PM</option>
<option value="21">9 PM - 10PM</option>
<option value="22">10 PM - 11PM</option>
<option value="23">11 PM - 12AM</option>
<option value="24">12 AM - 1AM</option>
</select>
<br>
<h3>Set lunch time</h3>
<select id="lunchTimeSelector">
<option value="1">1 AM - 2AM</option>
<option value="2">2 AM - 3AM</option>
<option value="3">3 AM - 4AM</option>
<option value="4">4 AM - 5AM</option>
<option value="5">5 AM - 6AM</option>
<option value="6">6 AM - 7AM</option>
<option value="7">7 AM - 8AM</option>
<option value="8">8 AM - 9AM</option>
<option value="9">9 AM - 10AM</option>
<option value="10">10 AM - 11AM</option>
<option value="11">11 AM - 12PM</option>
<option value="12" selected>12 PM - 1PM</option>
<option value="13">1 PM - 2PM</option>
<option value="14">2 PM - 3PM</option>
<option value="15">3 PM - 4PM</option>
<option value="16">4 PM - 5PM</option>
<option value="17">5 PM - 6PM</option>
<option value="18">6 PM - 7PM</option>
<option value="19">7 PM - 8PM</option>
<option value="20">8 PM - 9PM</option>
<option value="21">9 PM - 10PM</option>
<option value="22">10 PM - 11PM</option>
<option value="23">11 PM - 12AM</option>
<option value="24">12 AM - 1AM</option>
</select>
<br>
<h3>Set nap time</h3>
<select id="napTimeSelector">
<option value="1">1 AM - 2AM</option>
<option value="2">2 AM - 3AM</option>
<option value="3">3 AM - 4AM</option>
<option value="4">4 AM - 5AM</option>
<option value="5">5 AM - 6AM</option>
<option value="6">6 AM - 7AM</option>
<option value="7">7 AM - 8AM</option>
<option value="8">8 AM - 9AM</option>
<option value="9">9 AM - 10AM</option>
<option value="10">10 AM - 11AM</option>
<option value="11">11 AM - 12PM</option>
<option value="12">12 PM - 1PM</option>
<option value="13">1 PM - 2PM</option>
<option value="14">2 PM - 3PM</option>
<option value="15" selected>3 PM - 4PM</option>
<option value="16">4 PM - 5PM</option>
<option value="17">5 PM - 6PM</option>
<option value="18">6 PM - 7PM</option>
<option value="19">7 PM - 8PM</option>
<option value="20">8 PM - 9PM</option>
<option value="21">9 PM - 10PM</option>
<option value="22">10 PM - 11PM</option>
<option value="23">11 PM - 12AM</option>
<option value="24">12 AM - 1AM</option>
</select>
<br>
</div>
</div>
<script type="text/javascript">
var wakeuptime = 7;
var noon = 12;
var lunchtime = 12;
var naptime = lunchtime + 2;
var evening = 18;
var d = new Date();
var months = ["January","January","March","April","May","June","July","August","September","October","November","December"];
document.getElementById("year").innerHTML = "date: " + d.getFullYear() + " , " + months[d.getMonth()] + " , " + d.getDate() + "< br>";
var showCurrentTime = function(){
var clock = document.getElementById('clock');
var currentTime = new Date();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var seconds = currentTime.getSeconds();
var meridian = "AM";
if (hours >= noon) {meridian = "PM";}
if (hours > noon) {hours = hours - 12;}
if (minutes < 10) {minutes = "0" + minutes;}
if (seconds < 10) {seconds = "0" + seconds;}
var clockTime = hours + ':' + minutes + ':' + seconds + " " + meridian + "!";
clock.innerText = clockTime;
};
// Getting the clock to increment on its own and change out messages and pictures
var updateClock = function() {
var time = new Date().getHours();
var messageText;
var image = "15.jpg";
var timeEventJS = document.getElementById("timeEvent");
var imageJS = document.getElementById('image');
if (time == wakeuptime){image = "16.jpg"; messageText = "Wake up!"; }
else if (time == lunchtime){image = "18.jpg"; messageText = "Let's have some lunch!";}
else if (time == naptime){image = "19.jpg"; messageText = "Sleep tight!";}
else if (time < noon){image = "20.jpg"; messageText = "Good morning!";}
else if (time >= evening){image = "21.jpg"; messageText = "Good evening!"; }
else{image = "22.jpg"; messageText = "Good afternoon!"; }
console.log(messageText);
timeEventJS.innerText = messageText;
image.src = image;
showCurrentTime();
};
updateClock();
// Getting the clock to increment once a second
var oneSecond = 1000;
setInterval( updateClock, oneSecond);
// Activates Wake-Up selector
var wakeUpTimeSelector = document.getElementById("wakeUpTimeSelector");
var wakeUpEvent = function(){
wakeuptime = wakeUpTimeSelector.value;
};
wakeUpTimeSelector.addEventListener("change", wakeUpEvent);
// Activates Lunch selector
var lunchTimeSelector = document.getElementById("lunchTimeSelector");
var lunchEvent = function(){
lunchtime = lunchTimeSelector.value;
};
lunchTimeSelector.addEventListener("change", lunchEvent);
// Activates Nap-Time selector
var napTimeSelector = document.getElementById("napTimeSelector");
var napEvent = function(){
naptime = napTimeSelector.value;
};
napTimeSelector.addEventListener("change", napEvent);
</script>